.app{
    opacity: 0;
    background-color: var(--bg-fffdf8);
    min-height: 100vh;
    .main{
        @include size(1200px, auto);
        margin: 0 auto;
    }
    .header{
        @include size(100%, 80px);
        background-color: var(--bg-ffffff);
        box-shadow: 0 0 8px 0 var(--shadow-000000-10);
        position: sticky;
        top: -80px;
        left: 0;
        z-index: 20;
        .logo{
            @include size(auto, 60px);
        }
        .main{
            height: 100%;
            .item{
                @include size(fit-content, 100%);
                min-width: 111px;
                margin: 0 16px;
                .link{
                    height: 40px;
                    display: block;
                    overflow: hidden;
                    width: 100%;
                    .oneMenu{
                        height: 80px;
                        margin-top: 0;
                        color: var(--text-333333);
                        position: relative;
                        z-index: 9999;
                        div{
                            height: 40px;
                        }
                    }
                }
                .item-ItemBox{
                    visibility: hidden;
                    @include size(auto);
                    position: absolute;
                    top: 80px;
                    left: 50%;
                    transform: translateX(-50%);
                    overflow: hidden;
                    padding: 0 5px 5px;
                    .item-itemBox-box{
                        padding: 5px;
                        z-index: 2;
                        position: relative;
                        min-width: 168px;
                        top: 0;
                        right: 5px;
                        left: 5px;
                        box-shadow: 0 0 10px 0 var(--shadow-000000-10);
                        background-color: var(--bg-ffffff);
                        border-radius: 0 0 4px 4px;
                        text-align: center;
                        margin: 5px;
                        transform: translateY(-100%);
                        .item-item{
                           @include size(100%,40px);
                            padding: 0 16px;
                            box-sizing: border-box;
                            display: block;
                            overflow: hidden;
                            background-color: var(--bg-ffffff);
                            border-radius: 4px;
                            .oneMenu2{
                                height: 80px;
                                margin-top: 0;
                                div{
                                    height: 40px;
                                    color: var(--text-333333);
                                }
                            }
                            &:hover,&.select{
                                background-color: var(--bg-0066cc);
                                .oneMenu2{
                                    margin-top: -40px;
                                    div{
                                        color: var(--text-ffffff);
                                    }
                                }
                            }
                        }
                    }
                }
                &.select{
                    .link{
                        .oneMenu{
                            margin-top: -40px;
                        }
                    }
                }
                &:hover{
                    .link{
                        .oneMenu{
                            margin-top: -40px;
                        }
                    }
                    .item-ItemBox{
                        visibility: visible;
                        .item-itemBox-box{
                            transform: translateY(0px)
                        }
                    }
                }
            }
        }
    }
    .dialog{
        @include size;
        min-width: 100%;
        min-height: 100%;
        background-color:transparent;
        padding:0;
        margin:0;
        outline:none;
        border:none;
    }
    .dialog::backdrop{
        background-color: var(--shadow-ffffff-50);
        backdrop-filter: blur(5px);
    }
    .searchInput{
        @include size(400px, 40px);
        color: var(--text-333333);
    }
}
main{
    width: 100%;
}
.dialogClose{
    position: absolute;
    top: 32px;
    right: 32px;
    color: var(--text-333333);
    font-size: 32px;
}
.footer{
    @include size(100%, auto);
    background-color: var(--bg-ffffff);
    padding: 40px 0 20px;
    border-top: 1px solid var(--border-e0e0e0);
    .main{
        @include size(1200px, auto);
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 30px;
        .footer-section {
            flex: 1;
            min-width: 200px;
            h4 {
                margin-bottom: 15px;
                color: var(--text-333333);
            }
            a {
                display: block;
                color: var(--text-666666);
                text-decoration: none;
                margin: 8px 0;
                &:hover {
                    color: var(--text-0066cc);
                }
            }
            .FooterLogo{
                @include size(auto, 80px);
            }
        }
    }
    .footer-bottom {
        text-align: center;
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid var(--border-e0e0e0);
        color: var(--text-666666);
        font-size: 14px;
    }
}

:global {
    .ant-btn-variant-solid{
        background: var(--bg-0066cc);
    }
}